<template>
  <div class="breadcrumb">
    <div class="breadcrumb-list">
      <div v-for="(item, i) in breadcrumb.list" :key="i" class="breadcrumb-link" :class="{last: i == breadcrumb.list.length -1}">
        <router-link :to="{path: item.path}">{{item.name}}</router-link>
        <span v-if="i < breadcrumb.list.length - 1"> &gt; </span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: "breadcrumb-self",
  computed: {
    ...mapState(['breadcrumb'])
  }
}
</script>
<style lang="less" scoped>
@baseColor: #fc9153;
.breadcrumb {
  margin-bottom: 22px;
  .breadcrumb-list {
    .breadcrumb-link {
      display: inline-block;
      a {
        color: #666;
        font-size: 12px;
      }
      span {
        padding: 0 3px;
      }
      &.last{
        a {
          color: @baseColor;
        }
      }
    }
  }
}
</style>